<template>
  <div>
    <MonacoEditor :height="300" v-model="code" language="javascript" :options="editorOptions" />
    <el-button @click="formatJsCode" size="small" type="primary">测试代码</el-button>
    <span> 注意:外层必须包裹一个立即执行函数</span>
    <a href="https://github.com/yiminghe/async-validator" target="_blank">写法参考</a>
  </div>
</template>

<script setup>
// import prettier from 'prettier'
import { ref } from 'vue'
import MonacoEditor from 'vue3-monaco-editor'
import { ElMessage } from 'element-plus'
const code = defineModel()
function formatJsCode() {
  try {
    console.log('测试代码输出结果:', eval(code.value)())
    ElMessage({
      message: '测试代码成功,输出结果浏览器控制台查看',
      type: 'success',
      plain: true
    })
  } catch (err) {
    ElMessage.error({ message: `测试代码失败: ${err}`, plain: true })
  }
}
const editorOptions = ref({
  minimap: {
    enabled: false
  }
})
</script>
